<style scoped>
    .wraper {
        padding: 0;
        margin-top: -20px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }

    .detail {
        border-top: 1px dashed #cccccc;
    }

    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
        height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }



    /* 分页 start */

    .pagestyle {
        margin: 20px 0;
        float: right;
        padding-right: 15px;
    }


    /* 分页 end */

    .leftside {
        overflow-y: auto;
        border-right: 1px solid #e9eaec;

    }

    .leftside-search {
        padding: 10px;
    }

    .leftside-list {
        overflow-y: auto;
    }

    .leftside-list ul li {
        padding: 10px;
        cursor: pointer;
    }

    .leftside-list ul li:hover {
        background: rgba(64, 116, 225, 0.3);
        color: #4074e1;
        border-right: 4px solid #4074e1;
    }

    .leftside-list ul li:hover a {
        color: #4074e1;
    }

    .leftside-list .active,
    .leftside-list ul li.active:hover {
        background-color: #4074e1;
        color: #fff;
    }

    .leftside-list .active a,
    .leftside-list ul li.active:hover a {
        color: #fff;
    }

    .leftside-listspan {
        max-width: 75%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
        color: #000;
    }

    .leftside-edit {
        font-size: 18px;
    }

    .poptip-ul {
        color: #000;
    }

    .leftside-list ul li .poptip-ul li:hover {
        background-color: #4074e1;
        color: #fff;
    }

    .rightside-title {
        padding: 20px;
    }

    .rightside-title h3 {
        display: inline-block;
        font-size: 18px;
        font-weight: normal;
    }

    .title-total {
        font-size: 14px;
        color: #999;
    }

    .fr {
        float: right;
    }

    .rightside-content {
        padding: 5px;
    }

    .line {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dotted #dddee1;
        clear: both;
    }

    .center {
        text-align: center
    }

    .mr10 {
        margin-right: 10px;
    }

    .highlight_table .ivu-table .ivu-table-body tr.ivu-table-row-highlight td {
        height: 48px !important;
    }
</style>
<style>
    .highlight_table48 .ivu-table .ivu-table-body tr.ivu-table-row-highlight td {
        height: 48px !important;
    }
</style>
<template>
    <div class="member-manage ">
        <product-title></product-title>
        <div class="wraper">
            <Row>
                <Col span="4">
                <div class="leftside">
                    <div class="leftside-list" :style="leftHeight">
                        <ul>
                            <li v-for="(item,index) in ranklist" :key="item.id" :class="active == index ?'active':''" @click="leftActive(index)">
                                <Icon type="document-text"></Icon>
                                <a class="leftside-listspan" href="javascript:;" :title="item.name">{{item.name}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                </Col>
                <Col span="20">
                <div class="rightside">
                    <Row class="mt15 pl15 mb15">
                        <Col span="4">
                        <h3>{{rightTitle}}&nbsp;维持考核标准</h3>
                        </Col>
                    </Row>
                    <div class="rightside-content">
                        <Form :label-width="100">
                            <FormItem label="考核周期">
                                <Input v-model="checkmodal.assessmentCycleTypeNmae" disabled style="width:306px" size="large" type="text" placeholder="名称设置" /> &emsp;
                            </FormItem>
                            <FormItem label="降级后职级">
                                <Input v-model="checkmodal.target" style="width:306px" disabled size="large" type="text" placeholder="名称设置" /> &emsp;
                                <Button type="success" style="height:32px;" @click="adddateModal">周期设置</Button>&emsp;
                                <Button type="primary" style="height:32px;" @click="addcheckbtn">新增考核</Button>&emsp;
                            </FormItem>
                            <FormItem label="考核条件">
                                <Row>
                                    <Col span="20" class="mr10 highlight_table table-theme highlight_table48">
                                    <Table border ref="selection" :columns="columns4" :data="tableList" stripe border></Table>
                                    </Col>
                                </Row>
                            </FormItem>
                            <div class="line"></div>
                        </Form>
                    </div>
                </div>
                </Col>
            </Row>
        </div>
        <Modal v-model="showeditModal" :mask-closable='closeable' :closable="false" title="编辑考核信息">
            <Row>
                <Col>
                <Form :model="checkmodal" ref="checkmodal" :rules="ruleValidate" :label-width="120">
                    <template v-for="(item,index) in checkmodal.configValue.items">
                        <div style="border:1px dashed lightgray" class="mb15"></div>
                        <!-- <Form-item label="考核指标：" :style="{marginBottom:(index==0)?'0':'24px'}"> -->
                        <Form-item label="考核指标：" :style="(index==0)?'marginBottom:-10px':'marginBottom:24px'">
                            <Select v-model="item.templateId" filterable placeholder="产品名称" style="width:306px;">
                                <Option :value="itema.id" v-for="(itema,key) in proList" :key="itema.id">{{itema.name}}</Option>
                            </Select>
                            <Button v-if="index==0" type="success" @click="addCheckModal">添加</Button>&emsp;
                        </Form-item>
                        <Form-item label="考核条件：">
                            <Select v-model="item.operation" placeholder='请选择考核条件' style="width:306px;">
                                <Option value="大于等于">大于等于</Option>
                                <Option value="小于等于">小于等于</Option>
                                <Option value="大于">大于</Option>
                                <Option value="小于">小于</Option>
                                <Option value="等于">等于</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="考核值：">
                            <Input v-model="item.targetValue" placeholder="请输入考核值" style="width:306px;"></Input>
                        </Form-item>
                    </template>
                </Form>
                </Col>
            </Row>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="cancelModal">取消</Button>
                <Button style="width:60px;" class="tRight" type="success" size="small" long @click="addcheck">确定</Button>
            </div>
        </Modal>
        <Modal v-model="dateModal" :mask-closable='closeable' :closable="false" title="周期设置">
            <Row>
                <Col>
                <Form :label-width="120">
                    <FormItem label="考核周期: ">
                        <Select v-model="checkmodal.assessmentCycleType" label-in-value @on-change="rankChange($event)" placeholder="选择发放周期" :transfer="true">
                            <Option value="4">月</Option>
                            <Option value="3">季</Option>
                            <Option value="2">半年</Option>
                            <Option value="1">年</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="降级后职级">
                        <Select v-model="checkmodal.target" placeholder="名称设置">
                            <Option :value="item.name" v-for="(item,key) in ranksall" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                </Form>
                </Col>
            </Row>
            <div style="color:red;">提示:
                <span style="color:blue;">初次设置周期和职级完毕后,请点击新增考核,进行考核信息编辑,否则周期设置无效</span>
            </div>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="can1">取消</Button>
                <Button style="width:60px;" class="tRight" type="success" size="small" long @click="queding">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        add_weichi,
        get_indicators,
        get_rank
    } from '../../api/rule'
    import util from '../../libs/util.js';
    export default {
        data() {
            return {
                updateId: '', //依靠updateId 进行修改提交的权限操作
                sum: '', //记录修改的index
                updateModal: false,
                dateModal: false,
                tableaction: true,
                tableList: [],
                tableContent: {

                },
                proList: [],
                ranksall: [],
                disabled: true,
                current: {},
                // disabled: true,
                // cou: -1,
                active: 0,
                showeditModal: false,
                closeable: true,
                leftHeight: {
                    height: '0px'
                },
                rightHeight: {
                    height: '0px'
                },
                checkmodal: {
                    rankIds: '',
                    name: '王雷',
                    target: '',
                    assessmentCycleTypeNmae: '',
                    assessmentCycleType: '',
                    configValue: {
                        assessmentCycleType: '',
                        items: [{
                            templateId: "",
                            operation: "",
                            targetValue: '',
                        }],
                    },
                },
                rightTitle: '',
                ranklist: [],
                ruleValidate: {
                    'configValue.items.templateId': [{
                        required: true,
                        message: '最大值不能为空',
                        trigger: 'blur,change'
                    }],
                    'configValue.items.operation': [{
                        required: true,
                        message: '最大值不能为空',
                        trigger: 'blur,change'
                    }],
                    'configValue.items.targetValue': [{
                        required: true,
                        message: '最大值不能为空',
                        trigger: 'blur,change'
                    }],
                },
                columns4: [{
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: '80'
                    },
                    {
                        title: '考核条件',
                        key: 'showRankName',
                        align: 'center',
                    },
                    {
                        width: "120",
                        title: "操作",
                        key: "action",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button", {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            padding: "5px",
                                            borderRadius: '4px'
                                        },
                                        on: {
                                            click: () => {
                                                this.update(params.row.id);
                                            }
                                        }
                                    },
                                    "修改"
                                ),
                                h(
                                    "Button", {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        style: {
                                            padding: "5px",
                                            marginLeft: '5px',
                                            borderRadius: '4px'
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row.id);
                                            }
                                        }
                                    },
                                    "删除"
                                ),
                            ]);
                        }
                    },
                ],
            }
        },
        components: {
            productTitle
        },
        computed: {

        },
        created() {
            let winHeight = screen.availHeight;
            this.leftHeight.height = (winHeight - 280 - 32) + 'px';
            this.rightHeight.height = (winHeight - 280) + 'px';
            this.getRankList()
            this.getProList()
        },
        methods: {
            rankChange($event, index) {
                this.checkmodal.assessmentCycleTypeNmae = $event.label;
            },
            //获取考核指标
            getProList() {
                new Promise((resolve, reject) => {
                    get_indicators().then(response => {
                        if (response.data.err == 0) {
                            this.proList = response.data.data
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // 获取左边的侧边栏所需要展示的内容
            getRankList() {
                new Promise((resolve, reject) => {
                    get_rank()
                        .then(response => {
                            if (response.data.err == 0) {
                                this.ranklist = response.data.data;
                                this.checkmodal.rankIds = this.ranklist[0].id.toString();
                                this.rightTitle = this.ranklist[0].name;

                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        })
                        .then((res) => {
                            this.getDetail();
                            this.getContent();
                        })
                        .catch(error => {
                            reject(error);
                        });
                });
            },
            // 获取降级后的职级
            getDetail() {
                console.log(this.checkmodal.rankIds, 'id222')
                var url = BASE_URL1+'/kb/v1/rank/down/' + this.checkmodal.rankIds;
                var _this = this;
                util.ajax.get(url, {})
                    .then(function (res) {
                        if (res.data.err == 0) {
                            _this.ranksall = res.data.data;
                            console.log(_this.ranksall, '.._this.ranksall')
                        } else {
                            _this.$Message.error(res.data.info)
                        }
                    })
                    .catch((res) => {
                        console.log(res)
                    })
            },
            // get获取页面数据详情 进行页面展示
            getContent() {
                var _this = this;
                var url = BASE_URL1+'/kb/v1/rank/downgrade/' + _this.checkmodal.rankIds;
                util.ajax.get(url)
                    .then(function (res) {
                        if (res.data.err == 0) {
                            _this.tableList = res.data.data.downgradeRuleConfigSet;
                            if (_this.tableList.length == 0) {
                                _this.checkmodal.assessmentCycleTypeNmae = '';
                                _this.checkmodal.assessmentCycleType = '';
                                _this.checkmodal.target = '';
                            }
                            console.log(_this.tableList, "................111")
                            for (var i = 0; i < _this.tableList.length; i++) {
                                _this.tableList[i].configValue = JSON.parse(_this.tableList[i].configValue);
                                _this.checkmodal.assessmentCycleType = _this.tableList[0].assessmentCycleType.toString();
                                switch (parseInt(_this.tableList[0].assessmentCycleType)) {
                                    case 1:
                                        _this.checkmodal.assessmentCycleTypeNmae = '年'
                                        break;
                                    case 2:
                                        _this.checkmodal.assessmentCycleTypeNmae = '半年'
                                        break;
                                    case 3:
                                        _this.checkmodal.assessmentCycleTypeNmae = '季'
                                        break;
                                    case 4:
                                        _this.checkmodal.assessmentCycleTypeNmae = '月'
                                        break;
                                    default:
                                        _this.checkmodal.assessmentCycleTypeNmae = ''
                                }
                                _this.checkmodal.target = _this.tableList[0].target;

                                let str = "";
                                for (var t = 0; t < _this.tableList[i].configValue.items.length; t++) {
                                    // 通过id交换查询对应的指标名称
                                    if (_this.tableList[i].configValue.items[t].templateId) {
                                        for (var d in _this.proList) {
                                            if (_this.proList[d].id == _this.tableList[i].configValue.items[t].templateId) {
                                                _this.tableList[i].configValue.items[t].name = _this.proList[d].name
                                            }
                                        }
                                    } else {
                                        _this.tableList[i].configValue.items[t].name = ""
                                    }
                                    if (_this.tableList[i].configValue.items.length < 2) {
                                        str += _this.tableList[i].configValue.items[t].name + _this.tableList[
                                            i].configValue.items[t].operation + _this.tableList[i].configValue.items[
                                            t].targetValue
                                    } else {
                                        str += _this.tableList[i].configValue.items[t].name + _this.tableList[
                                            i].configValue.items[t].operation + _this.tableList[i].configValue.items[
                                            t].targetValue + '或'
                                    }
                                }
                                if (str.indexOf('或') != -1) {
                                    str = str.substring(0, str.length - 1)
                                }
                                _this.tableList[i].showRankName = str;
                            }
                            // console.log(_this.tableList, '._this.tableList.')
                        } else {
                            _this.$Message.error(res.data.info)
                        }
                    })
                    .catch((res) => {
                        console.log(res)
                    })
            },

            addcheckbtn() {
                console.log(this.checkmodal.target, 'target')
                if (!this.checkmodal.assessmentCycleType) {
                    this.$Modal.confirm({
                        title: "提示",
                        content: "检测到未曾添加周期设置,是否打开周期设置界面?",
                        onOk: () => {
                            this.dateModal = true;
                        }
                    });
                } else if (this.ranksall.length > 0 && !this.checkmodal.target) {
                    this.$Modal.confirm({
                        title: "提示",
                        content: "检测到未曾添加降级,是否需要立即设置降级",
                        onOk: () => {
                            this.dateModal = true;
                        }
                    });
                } else {
                    this.checkmodal.configValue.items = [{
                        templateId: "",
                        operation: "",
                        targetValue: '',
                    }]
                    this.showeditModal = true;
                }
            },
            adddateModal() {
                this.dateModal = true;
            },
            leftActive(index) {
                this.disabled = true;
                this.active = index
                this.rightTitle = this.ranklist[index].name;
                this.checkmodal.rankIds = this.ranklist[index].id.toString();
                console.log(this.checkmodal.rankIds, 'id')
                this.checkmodal.assessmentCycleTypeNmae = '';
                this.checkmodal.assessmentCycleType = '';
                this.checkmodal.target = '';
                this.getDetail();
                this.getContent();
            },
            cancelModal() {
                this.showeditModal = false;
                this.checkmodal.configValue.items = [{
                    templateId: "",
                    operation: "",
                    targetValue: '',
                }]
            },
            addCheckModal() {
                this.checkmodal.configValue.items.push({
                    templateId: "",
                    operation: "",
                    targetValue: '',
                })
            },
            //提交数据
            addcheck() {
                var _this = this;
                var items = _this.checkmodal.configValue.items;
                for(var i in items){
                    if(!items[i].templateId||!items[i].operation||!items[i].targetValue){
                        _this.$Message.error('所有的有效字段均是必须录入的')
                        return false;
                    }
                }
                console.log(this.checkmodal.target, "数据的提交")
                let form = Object.assign({}, _this.checkmodal);
                form.configValue = JSON.stringify(form.configValue);
                console.log(_this.updateId, "...._this.updateId")
                if (_this.updateId) {
                    var url = BASE_URL1+'/kb/v1/rule/assess/down/config/' + _this.updateId;
                    util.ajax.put(url, form)
                        .then(function (res) {
                            if (res.data.err == 0) {
                                _this.$Message.success('提交成功!')
                                _this.getDetail();
                                _this.getContent();
                                _this.showeditModal = false;
                                _this.updateId = '';
                            } else {
                                _this.updateId = '';
                                _this.$Message.error(res.data.info)
                            }
                        })
                        .catch((res) => {
                            console.log(res)
                        })
                } else {
                    var url = BASE_URL1+'/kb/v1/rule/assess/down/config/';
                    util.ajax.post(url, form)
                        .then(function (res) {
                            if (res.data.err == 0) {
                                _this.$Message.success('提交成功!')
                                _this.getDetail();
                                _this.getContent();
                                _this.showeditModal = false;
                                _this.checkmodal.configValue.items = [{
                                    templateId: "",
                                    operation: "",
                                    targetValue: '',
                                }]
                            } else {
                                _this.$Message.error(res.data.info)
                            }
                        })
                        .catch((res) => {
                            console.log(res)
                        })
                }
            },
            // 点击删除
            remove(index) {
                console.log(index)
                var _this = this;
                _this.$Modal.confirm({
                    title: "提示",
                    content: "是否要删除该条记录?",
                    onOk: () => {
                        var url = BASE_URL1+'/kb/v1/rule/assess/down/config/' + index;
                        util.ajax.delete(url, {})
                            .then(function (res) {
                                if (res.data.err == 0) {
                                    _this.$Message.error('删除成功!')
                                    _this.getDetail();
                                    _this.getContent();
                                } else {
                                    _this.$Message.error(res.data.info)
                                }
                            })
                            .catch((res) => {
                                console.log(res)
                            })
                    }
                });
            },
            update(index) {
                console.log(index)
                var _this = this;
                if (!_this.checkmodal.assessmentCycleType) {
                    _this.$Message.error("请点击周期设置,预先设定周期和降级")
                    _this.dateModal = true;
                    return false
                }
                if (_this.ranksall.length > 1 && !_this.checkmodal.target) {
                    _this.$Message.error("请点击周期设置,预先设定周期和降级")
                    _this.dateModal = true;
                    return false
                }
                _this.updateId = index;
                var url = BASE_URL1+'/kb/v1/rule/assess/down/config/' + index;
                util.ajax.get(url, {})
                    .then(function (res) {
                        if (res.data.err == 0) {
                            // _this.checkmodal = res.data.data;
                            _this.checkmodal.configValue = JSON.parse(res.data.data.configValue)
                            _this.checkmodal.configValue.items = _this.checkmodal.configValue.items
                            _this.showeditModal = true;
                        } else {
                            _this.$Message.error(res.data.info)
                        }
                    })
                    .catch((res) => {
                        console.log(res)
                    })
            },

            // 考核周期的取消
            can1() {
                this.dateModal = false;
                this.checkmodal.configValue.items = [{
                    templateId: "",
                    operation: "",
                    targetValue: '',
                }]
            },
            queding() {
                var _this = this;
                if (!_this.checkmodal.assessmentCycleType) {
                    _this.$Message.error("请设定周期和降级")
                    return false
                }
                if (_this.ranksall.length > 1 && !_this.checkmodal.target) {
                    _this.$Message.error("请设定周期和降级")
                    return false
                }
                // 当tablelist的长度大于0的时候 判断该提交为修改走修改接口
                if (_this.tableList.length > 0) {
                    var url = BASE_URL1+'/kb/v1/rule/assess/down/config/downgrade/' + _this.checkmodal.rankIds;
                    var data = {
                        assessmentCycleType: _this.checkmodal.assessmentCycleType,
                        target: _this.checkmodal.target
                    }
                    console.log(data, "....data")
                    util.ajax.put(url, data)
                        .then(function (res) {
                            if (res.data.err == 0) {
                                _this.$Message.success('提交成功!')
                                _this.getDetail();
                                _this.getContent();
                                _this.dateModal = false;
                            } else {
                                _this.$Message.error(res.data.info)
                            }
                        })
                        .catch((res) => {
                            console.log(res)
                        })
                } else {
                    _this.dateModal = false;
                }

            },
        }
    }
</script>